<template>
	<view class="right-top-ax">
		<view class="logo-mine"></view>
		<view class="wave wave1"> </view>
		<view class="wave wave2"> </view>
		<view class="wave wave3"> </view>
		<view class="wave wave4"> </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
.right-top-ax{
	position: relative;
	background: #2979ff;
}	
.logo-mine{
	    position: relative;
	    left: 50%;
		transform: translateX(-50%);
		height: 120rpx;
		z-index: 4;
		/* animation: scaleB 5s 1s ease-in-out infinite; */
	}
	@keyframes scaleB {
		// 0%{
		// 	transform: scale(.6);
		// }
		// 50%{
		// 	transform: scale(1.2);
		// }
		// 100%{
		// 	transform: scale(.6);
		// }
		0%{
			transform: translateX(0rpx);
		}
		100%{
			transform: translateX(750rpx);
		}
	}
	.wave {
		width: 100%;
		height: 45rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: url();
		background-size: 700rpx 45rpx;
	}
	
	.wave1 {
		z-index: 4;
		animation: animate1 20s linear infinite;
	}
	
	.wave2 {
		bottom: 4rpx;
		opacity: .5;
		z-index: 3;
		animation: animate2 14s linear infinite;
	}
	
	.wave3 {
		bottom: 10rpx;
		opacity: .2;
		z-index: 2;
		animation: animate1 10s linear infinite;
	}
	
	.wave4 {
		z-index: 1;
		bottom: 14rpx;
		opacity: .71;
		animation: animate2 7s linear infinite;
	}
	
	@keyframes animate1 {
		0% {
			background-position-x: 0;
		}
	
		100% {
			background-position-x: 740rpx;
		}
	
	}
	
	@keyframes animate2 {
		0% {
			background-position-x: 0;
		}
	
		100% {
			background-position-x: -700rpx;
		}
	
	}
</style>